<template>
	<van-nav-bar title="配送商业&联系人" />
	
	<van-cell-group v-for="(b,index) in bs" :key="index" inset style="margin-top: 0.625rem;margin-bottom: 0.625rem;">
		  <!-- 删除图标 -->
		  <van-icon
			@click="delBp(index,'配送商业')"
		    name="delete" 
		    style="float: right; color: #ff0000;margin-top: 0.625rem;margin-right: 0.625rem;" 
		  />
		<van-field label="配送商业" v-model="b.name" placeholder="请输入配送商业名称" required/>
		<van-field label="类型" v-model="b.type" placeholder="请输入商业公司名称" required/>
		<van-field label="区域" v-model="b.area" placeholder="请输入商业公司名称" required/>
	</van-cell-group>
	
	<van-cell-group v-for="(p,index) in pn" :key="index" inset style="margin-top: 0.625rem;margin-bottom: 0.625rem;">
		<!-- 删除图标 -->
		<van-icon 
		@click="delBp(index,'联系人')"
		  name="delete" 
		  style="float: right; color: #ff0000;margin-top: 0.625rem;margin-right: 0.625rem;" 
		/>
		<van-field label="联系人姓名" v-model="p.name" placeholder="请输入联系人姓名" required/>
		<van-field name="radio" label="性别" required>
		  <template #input>
		<van-radio-group v-model="p.gender" shape="square" direction="horizontal">
		  <van-radio name="男">男</van-radio>
		  <van-radio name="女">女</van-radio>
		</van-radio-group>
		  </template>
		</van-field>
		<van-field label="电话" v-model="p.phone" placeholder="请输入电话" required/>
	</van-cell-group>
	
	<van-action-bar>
		<van-action-bar-icon icon="arrow-left" text="上一步" />
		<van-action-bar-icon icon="plus" @click="addBs" text="配送商业" />
		<van-action-bar-icon icon="plus" @click="addPn" text="联系人" />
		<van-action-bar-button color="#00bffe" type="danger" text="预览协议" @click="preview"/>
	</van-action-bar>
</template>

<script setup lang="ts">
	
	import { showConfirmDialog, showToast } from 'vant'
import { ref } from 'vue'
	import { useRouter } from 'vue-router'
	
	const bs = ref([])
	const pn = ref([])
	const router = useRouter()

	const addBs = () => {
		let obj = {
			name:"",
			type:"",
			area:""
		}
		bs.value.push(obj)
	}
	
	const addPn = () => {
		let obj = {
			name:"",
			gender:"",
			phone:""
		}
		pn.value.push(obj)
	}
	
	const preview = ()=>{
		router.push('/preview')
	}
	
	const delBp = (index : number,type:string) => {
		showConfirmDialog({
			title: '提示',
			message: '当前为删除操作请注意',
		})
			.then(() => {
				if("联系人" == type){
					pn.value.splice(index, 1);
				}else{
					bs.value.splice(index, 1);
				}
				showToast("删除成功")
			})
			.catch(() => {
				showToast("取消")
			});
	}
	
</script>

<style>
</style>